{{include './index_header.html' '排行榜'}}
<style>
    .mui-spinner{
        width: 100px;
        height: 100px;
        font-size: 50px;
    }
    h3,h4{
        /* justify-self: center; */
        text-align: center;
    }
</style>
<div class="mui-content">
    <ul class="mui-table-view mui-grid-view mui-grid-9">
        <h3>
            <span class="mui-spinner"></span>
            <h4>加载中</h4>
        </h3>
    </ul>
</div>

<script>
    $.get('https://wyy-nine.vercel.app/toplist', (data) => {
        var str = ''
        console.log(data);
        data.list.forEach((item)=>{
            str += `
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="/rank_detail?id=${item.id}" >
                    <img src="${item.coverImgUrl}" alt="">
                    <div class="mui-media-body">${item.name}</div>
                </a>
            </li>
            
            `
        })
        $('.mui-grid-9').html(str)
    })

</script>



</body>

</html>